<template>
  <div>
    <van-button type="primary" @click="onClick">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <hr />
    <van-icon name="arrow" />
    <van-icon name="circle" />
    <van-icon name="star" />
    <hr />
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <!-- <van-popup
      v-model="show"
      position="right"
      :style="{ width: '50%', height: '100%' }"
    >
      内容
    </van-popup> -->
    <hr />
    <van-image
      width="100"
      height="100"
      lazy-load
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <!-- 上边框 -->
    <div class="van-hairline--top"></div>
    <hr />
    <van-number-keyboard
      :show="show"
      @blur="show = false"
      @input="onInput"
      @delete="onDelete"
    />
    <hr />
    <van-rate v-model="value" :readonly="readonly" @change="onChange" />
    <hr />
    <van-uploader v-model="fileList" multiple />
    <hr />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <hr />
    <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      currentPage: 1,
      show: true,
      value: 1,
      readonly: false,
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true },
      ],
    }
  },
  watch: {
    value(v) {
      // console.log(v, 'v')
      // this.value = v
    },
  },
  created() {
    Toast.success('成功文案')
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    onChange(v) {
      // this.value = v
      this.readonly = true
    },
    onInput(value) {
      Toast(value)
    },
    onDelete() {
      Toast('删除')
    },
    onClick() {
      this.$toast('提示文案')
    },
    showPopup() {
      this.show = true
    },
  },
}
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
